<template>
	<view class="videodetail">
		<view class="video_one">
			<cover-view class="vvveryfy"  v-if="doesVeryfy">
				<move-verify @result='verifyResult' ref="verifyElement"></move-verify>
			</cover-view>
			<!-- #ifdef H5 -->
			<view class="content" style="width: 750rpx;height: 440rpx;">  
				<view class="video-js" ref="video" style="width: 750rpx;height: 440rpx;">  
		
				</view>  
			</view>  
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<video id="myVideo" :title="videoDetailList.name" :src="videoUrl" ref="myVideo" @timeupdate="forbidDragProgress"  @loadedmetadata="getDuration" @ended="videoEnd" controls></video>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<video id="myVideo" :title="videoDetailList.name" :src="videoUrl" ref="myVideo" @timeupdate="forbidDragProgress"  @loadedmetadata="getDuration" @ended="videoEnd" controls></video>
			<!-- #endif -->
		</view>
		<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in tabList" :key="index" @tap="tabSelect" :data-id="index">
				{{item}}
			</view>
		</scroll-view>
		<view class="video_content" v-if="doeswatch">
			<view class="teacher_basic">
				<image :src="teacherInfo.image_url" mode="" style="width: 100rpx;height: 100rpx;border-radius: 50%;margin-top: 20rpx;"></image>
				<view class="teachername">
					<text style="display: block;font-size: 36rpx;">{{teacherInfo.name}}</text>
					<text style="font-size: 24rpx;color: grey;">{{teacherInfo.department_name}}</text>
				</view>
				<view class="adazqqq" style="margin: auto 0;width: 400rpx;">
					<view class="attention_teacher" @click="doesAttention(teacherInfo.id)">
						{{textLike}}
					</view>
				</view>
			</view>
			<view class="video_title">
				<text style="font-size: 40rpx;display: block;margin-bottom: 10rpx;">{{videoDetailList.name}}</text>
				<text class="lg text-gray cuIcon-video margin-right">{{videoDetailList.click_nums}}</text>
				<text class="lg text-gray margin-right">{{videoDetailList.add_time}}</text>
			</view>
			<view class="video_handle margin-top">
				<text 
				class="lg cuIcon-appreciatefill margin-right" 
				style="font-size: 30px;" 
				:class="videoDetailList.is_course_click?'doesdianzan':''"
				@click="doesdianz(videoDetailList.id)"
				></text>
				<text 
				class="lg cuIcon-favorfill margin-right-lg" 
				style="font-size: 30px;"
				:class="videoDetailList.is_collection_course?'doesshoucang':''"
				@click="doescollect(videoDetailList.id)"
				></text>
				<uni-rate 
				@change="myRate(videoDetailList.id)" 
				v-model="videoDetailList.is_course_grade" 
				:is-fill="false" :max="5" 
				allow-half :size="25" 
				style="display: inline-block;background: white;padding: 10rpx;border-radius: 36rpx;"/>
			</view>
			<view class="video_choose margin-top">
				<view class="videoChooseOne" v-for="(item,index) in lesson" :key="item.id">
					<h3>{{item.name}}</h3>
					<view class="videoCon margin-top margin-bottom" >
						<text class="margin-right" 
						:class="active===item1.id?'active':''" 
						v-for="(item1,index1) in item.video" 
						:key="item1.id" 
						@click="chooseLesson(item1.video_url,item1.is_over,item1.id)">
							{{item1.name}}
						</text>
					</view>
				</view>
			</view>
			<view class="video_interesting">
				<h3 class="margin-bottom-xs">感兴趣的</h3>
				<view class="contrrr padding-xs">
					<view class="content_one" v-for="item in hot_courses" :key="item.id" @click="gotovideodetail(item.id)">
						<image :src="item.image_url" mode=""></image>
						<view class="others">
							<h3>{{item.name}}</h3>
							<text style="font-size: 26rpx;">教师:{{item.teacher_name}}</text>
							<uni-rate v-model="item.grade" :readonly="true" :is-fill="false" :max="5" allow-half :size="16"/>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="kk" v-if="didwatch">
			<view class="comment_all padding-lg" >
				<view class="comment_one margin-bottom-sm" v-for="item in comments" :key="item.id">
					<image :src="item.image_url" mode="" style="width: 100rpx;height: 100rpx;border-radius: 50%;margin-top: 20rpx;"></image>
					<view class="comment_info margin-left">
						<text style="font-size: 36rpx;">{{item.username}}</text>
						<text class="margin-left text-gray">{{item.add_time | formatDate}}</text>
						<text class="margin-top-xs" style="font-size: 24rpx;color: grey; width: 100%;display: block;word-break: break-all;">{{item.comments}}</text>
					</view>
				</view>
			</view>
			<view v-if="isover" class="b_bottom text-center" style="padding-bottom: 80rpx;">
				----已经到底了-----
			</view>
			<view class="cu-bar bg-white search" style="position: fixed;bottom: 0;width: 750rpx;">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input type="text" v-model="commentValue" placeholder="发表评论"  @confirm="sendComment"></input>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import moveVerify from "@/components/helang-moveVerify/helang-moveVerify.vue"
	export default{
		components: {
			"move-verify":moveVerify
		},
		data() {
			return {
				textLike:'',
				TabCur: 0,
				active:0,
				scrollLeft: 0,
				value:3.5,
				id:0,
				tabList:['简介','评论'],
				doeswatch:true,
				didwatch:false,
				videoDetailList:{},
				teacherInfo:{},
				lesson:[],
				videoUrl:'',
				hot_courses:[],
				comments:[],
				commentValue:'',
				isover:false,
				total:0,
				page:1,
				resultData:{},
				doesVeryfy:false,
				doesPlay:false,
				timer:null,
				videoId:0,
			};
		},
		onShow() {
			//获取网络类型
			uni.getNetworkType({
				success: function (res) {
				}
			});
		},
		onLoad(option){ //option为object类型，会序列化上个页面传递的参数
			this.id = option.id
			this.getVideoDetailData()
			this.getCommentsData()
			this.doesgetVeryfy()
		},
		onUnload(){
			clearInterval(this.timer)
			this.timer = null
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				if(this.TabCur==0){
					this.doeswatch = true
					this.didwatch = false
				}else if(this.TabCur==1){
					this.doeswatch = false
					this.didwatch = true
				}
			},
			async getVideoDetailData(){
				let id = this.id
				let res = await this.$myRuquest({
					url:`/detail_courses/${id}/`
				})
				this.videoDetailList = res.data
				this.teacherInfo = this.videoDetailList.teacher_info
				this.lesson = this.videoDetailList.lesson
				this.hot_courses = this.videoDetailList.hot_courses
				this.videoUrl = this.lesson[0].video[0].video_url
				this.doesPlay = this.lesson[0].video[0].is_over
				this.videoId = this.lesson[0].video[0].id
				this.active = this.lesson[0].video[0].id
				if(this.teacherInfo.is_click_teacher==true){
					this.textLike = '已关注'
				}else{
					this.textLike = '+关注'
				}
			},
			async getCommentsData(){
				let page = this.page
				let res = await this.$myRuquest({
					url:`/course_comments/?page=${page}`,
					data:{course_id:this.id}
				})
				this.comments = [...this.comments,...res.data.results]
				this.total = res.data.count
			},
			chooseLesson(videoUrl,is_over,id){
				this.active = id
				this.videoUrl = videoUrl
				this.doesPlay = is_over
				this.videoId = id
			},
			async sendComment(){
				let comments = this.commentValue
				let course = this.id
				let res = await this.$myRuquest({
					url:'/create_course_comments/',
					data:{course,comments},
					method:'POST'
				})
				this.commentValue = ''
				this.getCommentsData()
			},
			onReachBottom() {
				if(this.comments.length>=this.total) return this.isover = true
				this.page++
				this.getCommentsData()
			},
			async doesAttention(id){
				let res = await this.$myRuquest({
					url:`/click_teacher/${id}/`,
					method:'POST'
				})
				if(res.data.msg=='取消关注成功'){
					this.textLike = '+关注'
					uni.showToast({
						title:'已取消关注'
					})
				}else if(res.data.msg=='关注成功'){
					this.textLike = '已关注'
					uni.showToast({
						title:'已关注'
					})
				}
			},
			async doesdianz(id){
				let res = await this.$myRuquest({
					url:`/course_click/${id}/`,
					method:'POST'
				})
				if(res.data.msg=='点赞成功'){
					this.videoDetailList.is_course_click = true
				}else if(res.data.msg=='已取消点赞'){
					this.videoDetailList.is_course_click = false
				}
			},
			async doescollect(id){
				let res = await this.$myRuquest({
					url:`/collection_course/${id}/`,
					method:'POST'
				})
				if(res.data.msg=='取消收藏成功'){
					this.videoDetailList.is_collection_course = false
				}else if(res.data.msg=='加入收藏成功'){
					this.videoDetailList.is_collection_course = true
				}
			},
			async myRate(id){
				let grade = this.videoDetailList.is_course_grade
				let res = await this.$myRuquest({
					url:`/update_grade/${id}/`,
					method:'POST',
					data:{grade}
				})
			},
			gotovideodetail(id){
				uni.navigateTo({
					url: `../videodetail/videodetail?id=${id}`
				})
			},
			/* 校验结果回调函数 */
			verifyResult(res){
				this.resultData = res;
				if(res.flag==true){
					this.doesVeryfy = false
					this.videoContext.play()
				}
			},
			/* 校验插件重置 */
			verifyReset(){
				this.$refs.verifyElement.reset();
	
				/* 删除当前页面的数据 */
				this.resultData = {};
			},
			doesgetVeryfy(){
				if(this.doesPlay==false){
					this.timer=setInterval(() => {
						if(this.doesVeryfy==false){
							this.doesVeryfy = true
							this.videoContext.pause()
						}
					}, 600000);
				}
			},
			forbidDragProgress(res) {
				if(this.doesPlay==false){
					let time=res.detail.currentTime;
					if((time-this.videoCurrentTime).toFixed(3)>2){
					    let nowtime=this.videoCurrentTime.toFixed(0);
					    this.videoContext.seek(nowtime);     
					}else{
						this.videoCurrentTime=time;	
					}
					this.timing = time
				}
			},
			getDuration(res){
				this.duration = res.detail.duration
			},
			videoEnd(){
				this.doesPlay = true
				this.$myRuquest({
					url:'/create_study_hour/',
					method:'POST',
					data:{video:this.videoId,time:this.duration,is_over:this.doesPlay}
				})
			},
			videoPlay(){
				
			}
		},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		watch:{
			// #ifdef H5
				videoUrl(newValue,oldValue){
					if(newValue){
						var video = document.createElement('video')  
						video.id = 'video'  
						video.style = 'width: 100%;height: 100%;'  
						video.controls = true  
						var source = document.createElement('source')  
						source.src = newValue  
						video.appendChild(source)  
						this.$refs.video.$el.appendChild(video)
						if(oldValue){
							this.$refs.video.$el.firstChild.remove()
						}
						videojs('video')  
					}
				}
			// #endif
		}
	}
</script>

<style lang="scss">
.videodetail{
	padding-bottom: 60rpx;
	video{
		width: 750rpx;
		height: 440rpx;
	}
	.video_content{
		padding: 20rpx;
		.teacher_basic{
			display: flex;
			.teachername{
				padding-left: 20rpx;
				padding-top: 15rpx;
			}
		}
		.attention_teacher{
			padding: 6px;
			letter-spacing: 3px;
			background: #39B54A;
			color: white;
			width: 70px;
			text-align: center;
			height: 31px;
			border-radius: 10px;
			margin: auto 0;
			float: right;
		}
		.video_title{
			margin-top: 30rpx;
		}
		.video_choose{
			.videoChooseOne{
				.videoCon{
					width: 100%;
					height: 86rpx;
					display: inline;
					white-space: nowrap;
					overflow-x: scroll;
					float: left;
					text{
						padding: 0 10rpx 0 20rpx;
						height: 80rpx;
						background: white;
						display: inline-block;
						font-size: 30rpx;
						letter-spacing: 2rpx;
						text-align: center;
						line-height: 80rpx;
						border: 1px solid #C4C4C4;
						border-radius: 18rpx;
					}
				}
			}
		}
	}
	.video_interesting{
		.content_one{
			display: flex;
			padding: 20rpx 30rpx;
			margin-bottom: 20rpx;
			background: white;
			border-radius: 20rpx;
			image{
				width: 185rpx;
				height: 130rpx;
				border-radius: 15rpx;
			}
			.others{
				width: 565rpx;
				height: 120rpx;
				padding-left: 30rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
			}
		}
	}
	.comment_all{
		.comment_one{
			display: flex;
			width: 100%;
			background: white;
			padding: 20rpx;
			border-radius: 18rpx;
			.comment_info{
				width: 480rpx;
			}
		}
	}
	.active{
		border: 1px solid #DB4747!important;
		color: #DB4747;
	}
	.doesdianzan{
		color: rgb(255, 202, 62);
	}
	.doesshoucang{
		color: rgb(255, 202, 62);
	}
	.video_one{
		position: relative;
		.vvveryfy{
			position: absolute;
			z-index: 99;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background: grey
		}
		.pathway[data-v-f9d47844]{
			top: 36%;
		}
	}
}
</style>
